<template>
    <Menus>
        <template v-slot:routeF>
            用户管理
        </template>
        <template v-slot:routeS>
            用户编辑
        </template>


        <div   ref="formNode">
            <el-form  :model="form" :rules="rules" label-width="120px">
                <el-form-item label="客户名称:" prop="id">
                    <!-- <el-input v-show="!isEdit" v-model="form.id"
                            maxlength="100"
                            show-word-limit
                            type="text"/> -->
                    <el-input  v-model="form.id"
                        maxlength="100"
                        show-word-limit
                        type="text"
                        style="width: 500px;"
                    />
                </el-form-item>
                <el-form-item label="归属人员:">
                    <el-input v-model="form.name"
                        maxlength="100"
                        show-word-limit
                        type="text"
                        style="width: 500px;"
                    /> 
                </el-form-item>
                <el-form-item label="客户类别:">
                    <el-select v-model="form.type" class="m-2" placeholder="客户类别" >
                        <el-option
                            v-for="item in options"
                            :key="item.value1"
                            :label="item.label"
                            :value="item.value1"
                        />
                        </el-select>
                </el-form-item>
                <el-form-item label="行业:">
                    <el-select v-model="form.industry" class="m-2" placeholder="行业" >
                        <el-option
                            v-for="item in optionss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="日期:">
                    <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="Pick a Date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item label="省份:">
                    <el-input v-model="form.province"
                        maxlength="100"
                        show-word-limit
                        type="text"
                        style="width: 500px;"
                    />
                </el-form-item>
                                
                <el-form-item label="city">
                    <el-input v-model="form.city"
                        maxlength="100"
                        show-word-limit
                        type="text"
                        style="width: 500px;"
                    />
                </el-form-item>   
            </el-form>
            <button v-show="!isEdit" :disabled="!can" @click="handlecomit">新建</button>
            <button v-show="isEdit" @click="handlecomit">修改</button>
            
        </div>


        
    </Menus>
</template>

<script setup>



const value = ref('')
const value1 = ref('')

const options = [
  {
    value1: '普通',
    label: '普通',
  },
  {
    value1: 'vip',
    label: 'vip',
  }
  
]

const optionss = [
  {
    value: '半导体',
    label: '半导体',
  },
  {
    value: '软件服务',
    label: '软件服务',
  },
  {
    value: '新能源',
    label: '新能源',
  },
  {
    value: '电子',
    label: '电子',
  },
  {
    value: '集成电路',
    label: '集成电路',
  },
  {
    value: '能源',
    label: '能源',
  }
  
]


import { computed, onMounted, reactive, ref,  watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import ajax from "../../apis/ajax";
import { ElMessage } from 'element-plus'

let query = useRoute().query
const router = useRouter()

let formNode = ref()

let isEdit = !!query.id
let initObj = {
    id: "",
    name: "",
    type: "",
    industry: "",
    date: "",
    province: "",
    city: ""
}
const form = reactive(JSON.parse(JSON.stringify(initObj)))

const can = computed(function() {
    return form.id && form.name && form.type && form.industry && form.date && form.province && form.city
})

const rules = reactive({
  id: [
    { required: true, message: "必须输入商品编码", trigger: "blur" },
    { min: 4, max: 20, message: "商品编码长度在4到20之间", trigger: "blur" }
  ]
})

watch(function(){
    console.log(arguments)
})
onMounted(function() {
    if (isEdit) {
        ajax({
            url: '/customer/' + query.id,
            method: 'GET'
        }).then(({ data }) => {
            console.log(data)
            for (let n in data.data) {
                form[n] = data.data[n]
            }
        })
    } else {
        // todo something
    }
})


function handlecomit(){
    // console.log(form)
    if(isEdit){
        let sumbitObj = {...form};
        console.log(sumbitObj)
        ajax({
                url: '/customer/' + query.id,
                method: 'PUT',
                /* 请求体参数使用data属性传递 */
                data: sumbitObj
            }).then(({data}) => {
                console.log(data)
                if(data.code == 200){
                    router.push('/customer/list')
                    // router.go(-1)
                }
                
            })
    }else{
        if(form.id !== ''){
            ajax({
                url: '/customer/save',
                method: 'PUT',
                /* 请求体参数使用data属性传递 */
                data: form
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    router.push('/customer/list')
                }
                
            })
        }else{
            ElMessage({
                showClose: true,
                message: 'please input message',
                type: 'error'
            })
        }
        
    }
    
}

</script>